import { List } from "antd-mobile";
import { useState } from "react";
import { SideBar } from "antd-mobile";
import {chinaRegions} from "../../pages/City/data";
import styles from './index.module.css'

interface Props {
	onSelect?: (city: string) => void
}
function Index({ onSelect }: Props) {
  const [activeKey, setActiveKey] = useState("0");
  return (
    <div className={styles.container}>
      <div className={styles.inner}>
        <SideBar className={styles.left} style={{width:150}} activeKey={activeKey} onChange={setActiveKey}>
          {chinaRegions.map((item, index) => (
             <SideBar.Item key={String(index)} title={item.province} />
          ))}
        </SideBar>

        <div className={styles.right} style={{flex:1, paddingLeft:12}}>
          <List>
            {chinaRegions[Number(activeKey)]?.cities.map((city) => (
              <List.Item
              arrowIcon={false}
                key={city}
                style={{
                  fontSize: 'var(--adm-font-size-main)',
                  color: 'var(--adm-color-text)'
                }}
                onClick={() => onSelect?.(city)}
              >
                {city}
              </List.Item>
            ))}
          </List>
        </div>
      </div>
    </div>
  )
}

export default Index
